<template>
  <view class="">
      <view class="border-bottom bg-white">
        <view class="px-4 overflow-hidden">
          <view class="h-12">
            <radio-group class="h-full flex items-center justify-around" @change="changeExtractType" v-model="extractType">
              <label>
                <radio value="alipay" :checked="commInfo.extract_type == 'alipay'"></radio>
                <text>支付宝</text>
              </label>
              <label>
                <radio value="bank" :checked="commInfo.extract_type == 'bank'"></radio>
                <text>银行卡</text>
              </label>

            </radio-group>

          </view>
        </view>
      </view>

      <view class="mt-4">

        <view class="border-bottom h-12 pr-5 bg-white flex items-center">
          <view class="w-28 pl-4 flex items-center box-border">姓名</view>
          <input class="flex-1 h-full px-4" placeholder="请输入姓名" placeholder-class="plcg" v-model="commInfo.name">
        </view>
        <view class="border-bottom h-12 pr-5 bg-white flex items-center" v-if="commInfo.extract_type == 'alipay'">
          <view class="w-28 pl-4 flex items-center box-border">支付宝卡号</view>
          <input class="flex-1 h-full px-4" placeholder="请输入支付宝卡号" placeholder-class="plcg" v-model="apyCard.alipay_code">
        </view>

        <view v-else>
          <view class="border-bottom h-12 pr-5 bg-white flex items-center">
            <view class="w-28 pl-4 flex items-center box-border">银行名称</view>
            <input class="flex-1 h-full px-4" placeholder="请输入银行名称" placeholder-class="plcg" v-model="bankCard.bankname">
          </view>

          <view class="border-bottom h-12 pr-5 bg-white flex items-center">
            <view class="w-28 pl-4 flex items-center box-border">银行卡号</view>
            <input class="flex-1 h-full px-4" placeholder="请输入银行卡号" placeholder-class="plcg" v-model="bankCard.cardnum">
          </view>
        </view>
      </view>

      <view class="border-bottom bg-white mt-4">
        <view class="px-4 pb-4 overflow-hidden">
          <view class="my-3">提现金额</view>
          <view class="flex items-baseline">
            <view class="text-xl">￥</view>
            <input class="px-1 w-full text-xl font-bold" type="number" v-model="commInfo.money">
          </view>
        </view>
      </view>

      <view class="border-bottom bg-white">
      <view class="px-4 py-4 flex items-center">
        <view class="text-xs">账户余额  {{ userInfoData.userInfo.wallet }}元</view>
        <view class="ml-2 text-xs text-blue-600" @click="withFill">全部提现</view>
      </view>
    </view>
  </view>

  <view class="px-4 mt-1 text-xs">
    <!--提现金额不能大于账户余额，且不能小于100元-->
  </view>

  <view class="mt-8 rounded-3xl w-72 h-12 m-auto bg-indigo-500 text-white flex justify-center items-center" v-if="isClick" @click="handleExtract">
    确认提现
  </view>
  <view class="mt-8 rounded-3xl w-72 h-12 m-auto bg-indigo-200 text-white flex justify-center items-center" v-else>
    确认提现
  </view>
</template>

<script setup lang="ts">
  import { ref, computed } from 'vue'
  import { uiwu } from '@/api/interface/interface'
  import { cashExtractApi } from '@/api/withdraw/index'
  import { throttle } from '@/api/common'
  import { userStore } from '@/store/userStore'

  const commInfo = ref({
    name: '',
    extract_type: 'alipay',
    money: ''
  })

  /** 支付宝-info **/
  const apyCard = ref({
    alipay_code: ''
  })
  /** 银行卡-info **/
  const bankCard = ref({
    bankname: '',
    cardnum: ''
  })

  /** 提现类型 **/
  const extractType = ref<string>('alipay')
  const changeExtractType = (e) => {
    commInfo.value.extract_type = e.detail.value
  }

  /** 用户提现 **/
  const userInfoData = userStore()
  const handleExtract = throttle(async() => {
    let queryObj = {};
    if(commInfo.value.extract_type == 'alipay') {
      queryObj = {...commInfo.value, ...apyCard.value}
    }else {
      queryObj = {...commInfo.value, ...bankCard.value}
    }
    const res = await cashExtractApi(queryObj)
    if(res.status != 200) {
      uiwu.toast(res.msg)
    }else {
      userInfoData.updateUserInfo()
      uiwu.toast(res.msg)
    }
  }, 3000)

  /** 全部提现-btn **/
  const withFill = () => {
    commInfo.value.money = userInfoData.userInfo.wallet
  }

  const isClick = computed(() => {
    if(commInfo.value.extract_type == 'alipay' && commInfo.value.name && commInfo.value.money && apyCard.value.alipay_code) {
      return true
    } else if (commInfo.value.extract_type == 'bank' && commInfo.value.name && commInfo.value.money && bankCard.value.bankname && bankCard.value.cardnum) {
      return true
    }
  })


  // }
</script>

<style scoped lang="scss">
page {
  background: #f5f5f5;
}

.card-bg {
  background: url("@/static/image/withdraw-confirm.png") no-repeat;
  background-size: 100% 100%;
}
</style>
